<template>
  <Swiper class="swiper-container" :modules="[Navigation]" navigation
          :slides-per-view="5" @update="updateSwiper">
    <SwiperSlide v-for="img in images" :key="img.id" @click="selectImg(img)">
      <img :src="img.imgUrl" :class="{active: img.id == (data.selectImg as any)?.id}">
    </SwiperSlide>
  </Swiper>
</template>

<script setup lang="ts">
import {Swiper, SwiperSlide} from "swiper/vue";
import {Navigation} from "swiper/modules";
import {reactive, nextTick} from "vue";

const emit = defineEmits(["select"]);
const data = reactive({
  selectImg: null,
});

const props = withDefaults(defineProps<{
  images: any[]
}>(), {images: () => []});

/**
 * swiper 更新时
 * @param swiper
 */
function updateSwiper(swiper: any) {
  nextTick(() => {
    let index = props.images.findIndex((img) => img.isDefault == 1);
    swiper.slideTo(index, 0, false);
    data.selectImg = props.images[index];
    emit('select', data.selectImg);
  })
}

function selectImg(img: any) {
  data.selectImg = img;
  emit('select', img);
}
</script>

<style lang="less" scoped>
.swiper {
  height: 63px;
  width: 400px;
  box-sizing: border-box;
  padding: 0 12px;
  margin-top: 5px;

  .swiper-slide {
    height: 56px;

    img {
      width: 56px;
      height: 56px;
      border: 1px solid #ccc;
      padding: 2px;

      &.active {
        border: 2px solid #f60;
        padding: 1px;
      }

      &:hover {
        border: 2px solid #f60;
        padding: 1px;
      }
    }
  }

  &:deep(.swiper-button-next) {
    left: auto;
    right: 0;
  }

  &:deep(.swiper-button-prev) {
    left: 0;
    right: auto;
  }

  &:deep(.swiper-button-next),
  &:deep(.swiper-button-prev) {

    box-sizing: border-box;
    width: 12px;
    height: inherit;
    background: rgb(235, 235, 235);
    border: 1px solid rgb(204, 204, 204);
    top: 0;
    margin-top: 0;

    &::after {
      font-size: 12px;
    }
  }
}
</style>
